<!DOCTYPE html>
<html lang="en">
<head>
    <!-- 发现 -->
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>发现</title>
    <link rel="stylesheet" href="./css/find.css">
    <link rel="stylesheet" href="./css/_reset.css">
</head>
<body>
    <div class="whole">
        <!-- 头部 -->
        <header>
            <!-- 返回按钮 -->
            <div class="back">Back</div>
            发现
            <!-- 选择地区 -->
            <select class="region">
                <option value="gaungzhou">广州市</option>
            </select>
        </header>
        <!-- 主页内容 -->
        <main>
            <!-- 分类搜索 -->
            <div class="hot_search">
                <!-- 搜索框 -->
                <div class="search_box">
                    <input type="text" placeholder="请输入商品名称" class="search">
                    <img src="./images/搜索矩.png" alt="">
                </div>
                <!-- 提示 -->
                <p class="label_title">大家都在搜</p>
                <!-- 热搜标签盒子 -->
                <div class="lable_box">
                    <div class="lable_black">寿司</div>
                    <div class="lable_black">羽毛球</div>
                    <div class="lable_black">火锅</div>
                    <div class="lable_black">游泳馆</div>
                    <div class="lable_black">电影</div>
                    <div class="lable_black">周黑鸭</div>
                    <div class="lable_black">KTV</div>
                    <div class="lable_black">肯德基</div>
                </div>
            </div>
            <!-- 热门搜索 -->
            <div class="fint_hot_search">
                <!-- 头部 -->
                <div class="gather_title">
                    <div class="left">
                        <img class="find_img" src="./images/热搜.png" alt="">
                        <span>热门搜索</span>
                    </div>
                    <div class="right">
                        <span>更多</span>
                        <img src="./images/更多.png" alt="">
                    </div>
                </div>
                <!-- 图片 -->
                <div class="all">
                    <div class="left">
                        <img src="./images/美食s.png" alt="">
                    </div>
                    <div class="right">
                        <div class="top">
                            <img src="./images/美食eng.png" alt="">
                        </div>
                        <div class="bottom">
                            <div class="left">
                                <img src="./images/美食1.png" alt="">
                            </div>
                            <div class="right">
                                <img src="./images/美食群.png" alt="">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 推荐搜索 -->
            <div class="recommend_search">
                <!-- 头部 -->
                <div class="gather_title">
                    <div class="left">
                        <img class="find_img" src="./images/小星星.png" alt="">
                        <span>热门搜索</span>
                    </div>
                    <div class="right">
                        <span>更多</span>
                        <img src="./images/更多.png" alt="">
                    </div>
                </div>
                <!-- 图片内容 -->
                <div class="recommend_search_img">
                    <img src="./images/喜欢2.png" alt="">
                    <img src="./images/运动1.png" alt="">
                    <img src="./images/电影2.png" alt="">
                </div>
            </div>
        </main>
        <!-- 尾部 -->
        <footer>
            <div class="navlist">
                <a href="./index.html">
                    <div class="home">
                        <img src="./images/首页.png" alt="">
                    首页
                    </div>
                </a>
                <a href="./classification.html">
                    <div class="classification">
                        <img src="./images/分类.png" alt="">
                        分类
                    </div>
                </a>
                <a href="./find.html">
                    <div class="find active">
                        <img src="./images/发现ing.png" alt="">
                        发现
                    </div>
                </a>
                <a href="./my.html">
                    <div class="my">
                        <img src="./images/我的.png" alt="">
                        我的
                    </div>
                </a>
            </div>
        </footer>
    </div>
</body>
</html>